<template>
	<view>
		<u-navbar placeholder :autoBack="true" title="核销详情"></u-navbar>
		<scroll-view :scroll-y="true" :style="{height: scrollViewHeight, backgroundColor: '#f5f5f5'}">
			<view style="padding: 32rpx;">
				<view style="padding: 32rpx;background-color: #fff;border-radius: 8rpx;">
					<view style="font-size: 36rpx;color: #333;font-weight: bold;margin-bottom: 32rpx;">
						<text>核销详情</text>
					</view>
					<view class="detail-cell">
						<view class="detail-cell-l">
							<u--image :showLoading="false" :src="detail.goodsImage && detail.goodsImage.split(',')[0]" width="160rpx" height="160rpx"></u--image>
						</view>
						<view class="detail-cell-r" style="padding: 16rpx 0 16rpx 16rpx;">
							<view>
								<text style="font-weight: bold">{{detail.goodsName}}</text>
							</view>
							<view style="height: 32rpx"/>
							<view>
								<text :style="{color: appColor}">x1</text>
							</view>
						</view>
					</view>
					<view class="detail-cell">
						<view class="detail-cell-l">
							<text>核销人员:</text>
						</view>
						<view class="detail-cell-r">
							<text>{{detail.exchangeUserName}}</text>
						</view>
					</view>
					<view class="detail-cell">
						<view class="detail-cell-l">
							<text>核销时间:</text>
						</view>
						<view class="detail-cell-r">
							<text>{{detail.exchangeTime}}</text>
						</view>
					</view>
					<view class="detail-cell">
						<view class="detail-cell-l">
							<text>核销状态:</text>
						</view>
						<view class="detail-cell-r">
							<text style="color: #f40215;">{{detail.status_dictText}}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		computed: {
			...mapState(['detail']),
			appColor() {
				return this.appPrimaryColor || '#e1251b'
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 + 'px';
			}
		},
	}
</script>


<style lang="scss" scoped>
	.pay-title {
		font-size: 32rpx;
		color: #000;
		text-align: center;
	}
	.parking-top {
		height: 280rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	
	.detail-cell {
		display: flex;
		font: size 28rpx; 
		color: #333;
		margin-bottom: 32rpx;
		&:last-child {
			margin-bottom: 0rpx;
		}
		.detail-cell-l {
			width: 160rpx;
		}
		.detail-cell-r {
			flex: 1;
		}
	}
	
	.good-detail-bootom {
		background-color: #ffffff;
		position: fixed;
		height: 50px;
		width: 100vw;
		bottom: 0;
		left: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 iOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		/*兼容 iOS>11.2*/
		box-sizing: content-box;
	
		.good-detail-bootom-r {
			flex: 1;
			text-align: right
		}
	}
</style>
